<template>
  <n-tabs
    default-value="scene"
    type="line"
    size="small"
    pane-class="!p-10px overflow-y-auto"
    id="sidebar-attributes"
    placement="left"
  >
    <n-tab-pane
      v-for="t in data"
      :key="t.name"
      :name="t.name"
      :tab="iconTabName(t.icon.text, t.icon.component)"
      display-directive="show"
      :disabled="t.name === 'disabled'"
    >
      <component :is="t.component" />
    </n-tab-pane>
  </n-tabs>
</template>

<script setup>
import { h, ref, markRaw } from "vue";
import { NIcon, NTooltip } from "naive-ui";
import {
  GlobeAsia,
  Uncharted,
  Delicious,
  DrawPolygon,
  ImageRegular,
} from "@vicons/fa";
import {
  ResultOld,
  Script,
  Draw,
  JoinOuter,
  MagicWandFilled,
} from "@vicons/carbon";

import { t } from "@/language";
import SidebarScene from "@/components/sidebar/SidebarScene.vue";
import SidebarEffect from "@/components/sidebar/SidebarEffect.vue";
import SidebarHistory from "@/components/sidebar/SidebarHistory.vue";
import SidebarObject from "@/components/sidebar/SidebarObject.vue";
import SidebarGeometry from "@/components/sidebar/SidebarGeometry.vue";
import SidebarMaterial from "@/components/sidebar/SidebarMaterial.vue";
// import SidebarSceneTheme from "@/components/sidebar/SidebarSceneTheme.vue";
import SidebarAnimations from "@/components/sidebar/SidebarAnimations.vue";
import SidebarScript from "@/components/sidebar/SidebarScript.vue";
import SidebarDrawing from "@/components/sidebar/SidebarDrawing.vue";

const data = ref([
  {
    name: "scene",
    icon: { text: "场景配置", component: markRaw(GlobeAsia) },
    component: markRaw(SidebarScene),
  },
  {
    name: "effect",
    icon: { text: "后期处理", component: markRaw(MagicWandFilled) },
    component: markRaw(SidebarEffect),
  },
  // {name:"styles",icon:{text:'Scene theme',component:JoinOuter},component:SidebarSceneTheme},
  {
    name: "history",
    icon: { text: "历史记录", component: markRaw(ResultOld) },
    component: markRaw(SidebarHistory),
  },
  {
    name: "drawing",
    icon: { text: "场景图纸", component: markRaw(ImageRegular) },
    component: markRaw(SidebarDrawing),
  },
  // 以下为动态项
  {
    name: "object",
    icon: { text: "对象", component: markRaw(Uncharted) },
    component: markRaw(SidebarObject),
  },
  {
    name: "geometry",
    icon: { text: "几何", component: markRaw(DrawPolygon) },
    component: markRaw(SidebarGeometry),
  },
  {
    name: "material",
    icon: { text: "材质", component: markRaw(Delicious) },
    component: markRaw(SidebarMaterial),
  },
  {
    name: "animations",
    icon: { text: "动画", component: markRaw(Draw) },
    component: markRaw(SidebarAnimations),
  },
  {
    name: "script",
    icon: { text: "脚本", component: markRaw(Script) },
    component: markRaw(SidebarScript),
  },
]);

function iconTabName(text, icon) {
  return h(
    NTooltip,
    {
      placement: "left",
    },
    {
      default: text,
      trigger: () => h(NIcon, { size: 14 }, h(icon)),
    }
  );
}
</script>

<style lang="less" scoped>
.n-tabs {
  height: calc(100vh - var(--header-height) - var(--footer-height));

  // 配置按功能类型（常驻/动态） 分割
  :deep(.n-tabs-wrapper) {
    .n-tabs-tab-wrapper:nth-child(6) {
      margin-top: 10px;
      border-top: 1px solid var(--n-tab-border-color);
    }
  }
}
</style>
